<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery.js"></script>
</head>

<body>
    <div class="layui-container">
        <div class="layui-form-item" style="margin-top:20px;">
            <label class="layui-form-label">学生编号</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required lay-verify="required" placeholder="请输入学生编号" autocomplete="off"
                    class="layui-input">
            </div>
            <input type="button" class="layui-btn" value="查询" onclick="doSend()">
        </div>
        <table class="layui-table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>头像</th>
                    <th>班级</th>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        // function doSend(){
        //     $.ajax({
        //         url:"/jquery/getStu",
        //         data:{
        //             id:$("input[name='id']").val()
        //         },
        //         success:function(data){
        //            let str=`
        //                 <tr>
        //                     <td>${data.id}</td>    
        //                     <td>${data.name}</td>    
        //                     <td>${data.link}</td>    
        //                     <td><img src='/upload/${data.img}'></td>    
        //                     <td>${data.cname}</td>    
        //                 </tr>

        //            `;

        //            $("tbody").html(str);
        //         }
        //     });
        // }

        async function doSend() {
            let data = await $.ajax({
                url: "/jquery/getStu",
                data: {
                    id: $("input[name='id']").val()
                }
            }).promise();
            let str = `
                        <tr>
                            <td>${data.id}</td>    
                            <td>${data.name}</td>    
                            <td>${data.link}</td>    
                            <td><img src='/upload/${data.img}'></td>    
                            <td>${data.cname}</td>    
                        </tr>
                    
                   `;

            $("tbody").html(str);
        }
    </script>

</body>

</html>